<template>
	<div class="paint">
		<x-header title="钣喷优选店" :left-options="{backText:''}" class="whiteHeader"></x-header>
		<div class="topBar">
			<div class="item item">
				<img src="../../assets/image/cafe/item1.png" alt="">
				<p>车网通认证</p>
			</div>
			<div class="item2 item">
				<img src="../../assets/image/cafe/item2.png" alt="">
				<p>高效钣喷流水线</p>
			</div>
			<div class="item3 item">
				<img src="../../assets/image/cafe/item3.png" alt="">
				<p>高标准品控</p>
			</div>
			<div class="item4 item">
				<img src="../../assets/image/cafe/item4.png" alt="">
				<p>行业内多次获奖</p>
			</div>
		</div>
		<div class="blank"></div>
		<div class="main">
			<div class="storeItem border-bottom" v-for="item in allData" @click="goStoreDetail(item.COMP_ID,item.COORDINATE)">
				<img :src="item.SHOP_PHOTO" alt="" class="logo">
				<div class="content">
					<div class="storeName">
						{{item.SHOP_NAME}}
					</div>
					<div class="storeLogo">
						<img :src="item.SHOP_LOGO" alt="" style="width:0.4rem;display:block">
					</div>
					<div class="storeAddr">
						{{item.SHOP_ADDRESS}}
					</div>
				</div>
				<div class="rightbar" @click.stop="goTo4s(item.COORDINATE)">
					<img src="../../assets/image/cafe/go4s.png" alt="">
					<p>{{item.DISTANCE/1000|keepTwoDot}}km</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	/*智能保养*/
	import { XHeader } from 'vux';
	import { setCookie, getCookie } from '../../util/commonUtils';
	export default {
		name: "maintainHome",
		// 数据
		data() {

			return {
				userId: '',
				city:'',//城市
				cid:'',//城市id
				latlgt:'',//经纬度
				area: '区域', //区域
				allData:'',//门店列表	
			}
		},
		// 计算属性
		computed: {

		},
		// 创建（实例创建完成）
		created() {
			this.userId = getCookie('loginkey');
			this.city = sessionStorage.getItem('city');//城市
			this.latlgt = sessionStorage.getItem('latlgt');//经纬度	
			this.cid = sessionStorage.getItem('ID');//对应的城市id
			this.$vux.loading.show({
		       text: ''
		    });				
			let obj = {};
		    let that = this;
		    obj.REGION = '';
		    obj.COORDINATE = this.latlgt;
		    obj.CITY = this.city;
		    obj.MAINBRAND = that.selectedBrandName == '全部' ? '':that.selectedBrandName;
		    obj.SERV_CLASS_ID = 10003;	
		    if(that.selectedSortName == '全部'){
		    	obj.SORTING = 0;
		    } else if (that.selectedSortName == '距离最近'){
		    	obj.SORTING = 2;
		    } else if (that.selectedSortName == '好评率最高') {
		    	obj.SORTING = 1;
		    } else {
		    	obj.SORTING = 0;
		    }			    
		    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{ 				    				    	
		            if(res.STATUS_CODE == 1){	
		            	this.allData = res.RESULT_DATA;
		            	this.$vux.loading.hide();	            
		            }                                 
		    },err=>console.log(err));
			},
		// el被创建，并挂载到实例上
		mounted() {

		},
		// 方法（实例中的方法）-----------
		methods: {
			goStoreDetail(id,COORDINATE){									
				this.$router.push('/storeDetail/'+id+'?coordinate='+COORDINATE);				
			},
			goTo4s(addr){
				var str = addr.split(",")
				window.location.href="http://api.map.baidu.com/geocoder?location="+str[1]+","+str[0]+"&coord_type=bd09ll&output=html&src=cwt"
				 // window.location.href="http://api.map.baidu.com/marker?location="+str[1]+","+str[0]+"&title=目的地&content=目的地&coord_type=bd09ll&output=html&src=cwt"

			},
		},
		// 子组件
		components: {
			XHeader
		}
	}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
	.paint{
		.vux-header{
			position:fixed;
			width: 100%;
			top: 0;
			left: 0;
		}
		position: relative;
		height: 100%;
		width: 7.5rem;
		background: #ffffff;
		.topBar{
			position: fixed;
			top: 0.8rem;
			left: 0;
			width: 100%;
			height: 2rem;
			display: flex;
			background: #ffffff;
			z-index: 99;
			border-bottom: 0.2rem solid #f5f5f5;
			.item{
				width: 25%;
				font-size: 0.2rem;
				color:#666666;
				img{
					width: 0.7rem;
					height: 0.7rem;
					margin-top: 0.3rem;
				}
				p{
					margin-top: 0.1rem;
				}
			}
		}
		.blank{
			height: 2.8rem;
		}
		.main{
			padding:0 0.3rem;
			background: #ffffff;
			.storeItem{
				height: 2.1rem;
				padding: 0.3rem 0;
				position: relative;
				text-align: left;
				.logo{
					width: 2rem;
					height: 1.5rem;
					position: absolute;

				}
				.content{
					padding-left: 2.2rem;
					height: 1.5rem;
					width: 5.8rem;
					.storeName{
						font-size: 0.3rem;
						color:#222222;
						height: 30%;
					}
					.storeLogo{
						height: 35%;
					}
					.storeAddr{
						font-size: 0.22rem;
						color:#999999;
					}
				}
				.rightbar{
					position: absolute;
					text-align: right;
					right: 0;
					top: 0;
					font-size: 0.22rem;
					color: #999999;
					img{
						margin-top: 1rem;
						width: 0.42rem;
						height: 0.42rem;
					}
				}
			}
		}
	}
</style>